<template>
  <div class="NewAbnormalbox">
    <div class="leftbox">
      <el-input
      size="small"
      style="margin-bottom: 10px;"
        placeholder="输入关键字进行过滤"
        v-model="filterText">
      </el-input>
      <el-tree
        class="filter-tree"
        :data="data"
        @check="handClick"
        show-checkbox
        node-key="code"
        :default-checked-keys="checkarr"
        :default-expanded-keys="zhankaiarr"
        :props="defaultProps"
        :filter-node-method="filterNode"
        ref="tree">
      </el-tree>
    </div>
    <div class="rightbox">
      <div class="righttop">
        <div>
          <span class="text">用电企业</span>
          <span>
          <el-select size="small" v-model="companyNo" filterable multiple  >
            <el-option v-for="(item,index) in qiyelist" :key="index" :label="item.bizOrgName" :value="item.bizOrgNo" class="option"></el-option>
          </el-select>
        </span>
        <span class="text">日期</span>
        <span>
          <el-date-picker
            size="small"
            v-model="value1"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </span>
        <span><el-checkbox v-model="checked">只显示不通过</el-checkbox></span>
        </div>
        <div>
          <el-button  @click="chongzhi" size="small">重置</el-button>
          <el-button @click="gettablelist"  type="primary" size="small">查询</el-button>
        </div>
      </div>
      <div class="rightbody">
        <div class="title">
          <div>异常分析</div>
          <div><TopTile  @command="command" @daochu="daochu" @shuaxin="shuaxin"></TopTile></div>
        </div>
        <div class="table">
          <el-table
          :size="issize"
            border
            :header-cell-style="{'text-align':'center',background:'#f5f5f5'}"
            v-loading="loading"
            height="calc(100% - 1px)"
              style="width: 100%"
              :data="tableData">
              <template slot="empty">
                <el-empty description="暂无数据"></el-empty>
              </template>
            <el-table-column
              prop="companyName"
              label="用电单位">
            </el-table-column>
            <el-table-column
              prop="ruleName"
              label="分析规则">
            </el-table-column>
            <el-table-column
              prop="analysisResult"
              label="分析结果">
            </el-table-column>
            <el-table-column
              prop="resultExplain"
              label="结果说明">
              <template #default="{row}">
                <span v-if="row.resultType!=='subburo'"><el-link type="primary" :underline="false" @click="submit(row)">查看明细</el-link></span>
              </template>
            </el-table-column>
            <el-table-column
              prop="taskTime"
              align="center"
              label="任务时间">
            </el-table-column>
            <el-table-column
              prop="finishTime"
              align="center"
              label="分析完成时间">
            </el-table-column>
          </el-table>
        </div>
              <!-- 底部分页 -->
        <div class="fenye">
          <el-pagination
                background
                layout="prev, pager, next"
                :current-page.sync="pageobj.pageNo"
                :page-size="20"
                @current-change="gettablelist"
                :total="+totalCount">
              </el-pagination>
        </div>
        <!-- 弹窗 -->
         <div>
          <el-dialog
            :title="rowvalue=='measure'?'采集数据分析结果':rowvalue=='device'?'设备数据分析结果':'告警数据分析结果'"
            :visible.sync="dialogVisible"
            width="60%">
            <div>
              <TableColumn
              :tableData="tableDatas" 
              :tableConfig="tableConfig" >
                <el-table-column
                  prop="dianliang"
                  align="center"
                  width="100"
                  label="操作">
                  <template #default="{row}">
                    <span>
                      <el-link type="primary" @click="looks(row)" :underline="false" >查看</el-link>
                    </span>
                  </template>
                </el-table-column>
              </TableColumn>
              <!-- 底部分页 -->
              <div class="fenye">
                <el-pagination
                      background
                      layout="prev, pager, next"
                      :current-page.sync="pageobjs.pageNo"
                      :page-size="20"
                      @current-change="xiangqinglist"
                      :total="+totalCounts">
                    </el-pagination>
              </div>
            </div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible = false" size="small">取 消</el-button>
            </span>
          </el-dialog>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import TableColumn from '@/components/Table/index.vue'
import {exportexcel} from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import { getuserlistapi } from '@/api/analysis'
import {gettreevalueapi,gettablelistapi,getxiangqingqpi} from '@/api/system/NewAbnormal'
export default {
  name: 'CallPoliceIndex',
  components: {
    TopTile,
    TableColumn
  },
  data() {
    return {
      checked: false,
      dialogVisible:false,
      data: [],
      issize:'medium',
      value1:['',''],
      companyNo: [],
      qiyelist:[],
      filterText:'',
      defaultProps: {
        children: 'childrenList',
        label: 'name'
      },
      pageobj: {
        pageNo: 1,
        pageSize:20,
      },
      totalCount: '',
      loading: false,
      tableData: [],
      treelist: [],
      rowvalue: {},
      tableDatas: [],
      tableConfig:[
        {label:'设备名称',prop:'deviceName',width:'200'},
        {label:'设备测点',prop:'pointTag',width:'120'},
        {label:'结果说明',prop:'resultExplain'},
      ],
      pageobjs: {
        pageNo: 1,
        pageSize:20,
      },
      totalCounts: '',
      zhankaiarr: [],
      checkarr:[]
    };
  },

  async mounted() {
    const { data:{entity:{childrenList}} } = await gettreevalueapi()
    this.data = childrenList
    this.zhankaiarr.push(childrenList[0].code)
    this.checkarr.push(childrenList[0].code)
    const { data: { list } } = await getuserlistapi()
    this.companyNo.push(list[0].bizOrgNo)
    this.qiyelist = list
    this.handClick()
  },

  methods: {
    // 树节点点击
    handClick() {
      this.treelist = this.$refs.tree.getCheckedNodes(false, true)
      if (!this.treelist.length) {
        this.tableData = []
        this.totalCount =''
      } else {
        this.gettablelist()
      }
    },
    // 获取表格数据 bizOrgNo
    async gettablelist() {
      if(!this.treelist.length) return this.$message.warning('请先选择数据')
      this.loading = true
      const nodeCodes = this.treelist.map(ele => ele.code)
      const { data: { list, totalCount } } = await gettablelistapi({
        nodeCodes: nodeCodes.join(','), companyNos:this.companyNo.join(','), fromDate: this.value1[0], toDate: this.value1[1],
        passFlag:this.checked?'1':'0',pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize,
      })
      this.tableData = list
      this.totalCount = totalCount
      this.loading = false
    },
    // 查看明细
    async submit(row) {
      this.dialogVisible = true
      this.rowvalue = row
      this.xiangqinglist()
    },
    // 查看
    looks(row) {
      console.log(row.sampleData);
      console.log(JSON.parse(row.sampleData));
    },
    // 详情列表
    async xiangqinglist() {
      const { data: { list, totalCount } } = await getxiangqingqpi({
        pageNo: this.pageobjs.pageNo - 1, pageSize: this.pageobjs.pageSize, companyNo: this.rowvalue.companyNo,
        resultType:this.rowvalue.resultType,ruleCode:this.rowvalue.ruleCode,taskId:this.rowvalue.taskId
      })
      this.tableDatas = list
      this.totalCounts=totalCount
    },
    // 重置
    chongzhi() {
      this.checked = false
      this.value1 = ['', '']
      this.companyNo=[this.qiyelist[0].bizOrgNo]
      this.gettablelist()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      if(!this.treelist.length) return this.$message.warning('请先选择数据')
      const nodeCodes = this.treelist.map(ele => ele.code)
      exportexcel('pio-microservice-biz/pio/abnormal/analysis/new/exportExcel',{
        nodeCodes: nodeCodes.join(','), companyNos:this.companyNo.join(','), fromDate: this.value1[0], toDate: this.value1[1],
        passFlag:this.checked?'1':'0',pageNo:this.pageobj.pageNo-1,pageSize:this.pageobj.pageSize,
      },'异常分析')
    },
    // 刷新列表
    shuaxin() {
      if(!this.treelist.length) return this.$message.warning('请先选择数据')
      this.gettablelist()
      this.$message.success('列表刷新成功')
    },
    // 树节点过滤
    filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      }
  },
  watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
};
</script>

<style  scoped>
.NewAbnormalbox{
 height: 100%;
 padding: 10px;
 display: flex;
 .leftbox{
  width: 300px;
  height: 100%;
  background-color: #fff;
  margin-right: 10px;
  padding: 20px;
 }
 .rightbox{
  width: calc(100% - 310px);
  height: 100%;
  .righttop{
    height: 80px;
    padding: 0 20px;
    line-height: 80px;
    background-color: #fff;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
      .text{
        font-size: 14px;
        color: #606266;
      }
      span{
        margin-right: 15px;
      }
    .button{
      width: 60px;
      height: 30px;
      margin-right: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    .sure{
      color: #fff;
      background-color: #1a90fe;
    }
  }
  .rightbody{
    height: calc(100% - 90px);
    background-color: #fff;
    padding: 20px;
    .title{
      margin-bottom: 10px;
      display:flex;
      justify-content:space-between;
    }
    .table{
      height: 90%;
    }
  }
 }
}
.fenye{
      margin-top: 10px;
      text-align: right;
    }
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>